<template>
  <view class="uni-container">
    <uv-status-bar></uv-status-bar>
    <view class="head" style="margin-top: 50rpx;">
      <view class="logo logo-left">
        <image style="height: 30px;width: 30px;" :src="siteLogo" mode="heightFix"></image>
        <view class="title">{{siteName||' '}}</view>
      </view>
     
    </view>
    <view class="body">
      <view class="title">系统登录</view>
      <uni-forms ref="form" v-model="formData" :rules="rules" @submit="submitForm">
        <uni-forms-item name="username" labelWidth="35" style="padding-top: 25rpx;">
          <template v-slot:label>
            <view style="display: flex;align-items: center;padding: 10rpx;">
              <uni-icons color="white" size="26" type="person-filled" />
            </view>
          </template>
          <input ref="usernameInput" class="uni-input" type="text" placeholder="账号" v-model="formData.username" />
        </uni-forms-item>
        <uni-forms-item name="password" labelWidth="35" style="padding: 30rpx 0 50rpx 0;">
          <template v-slot:label>
            <view style="display: flex;align-items: center;padding: 10rpx;">
              <uni-icons color="white" size="26" type="locked-filled" />
            </view>
          </template>

          <input ref="passwordInput" @confirm="submitForm" class="uni-input" :password="showPassword" placeholder="密码"
            v-model="formData.password" maxlength="30" />
          <view style="position: absolute;right: 5px;top:8px;width: 30px;height: 30px;background-color: #293443;">
            <uni-icons @click="changePassword(false)" v-show="showPassword" class="uni-icon-password-eye pointer"
              type="eye-filled" color="white" size="20" />
            <uni-icons @click="changePassword(true)" v-show="!showPassword" class="uni-icon-password-eye pointer"
              type="eye-slash-filled" color="white" size="20" />
          </view>
        </uni-forms-item>
        <uni-forms-item v-if="needCaptcha" left-icon="image" class="icon-container" name="captcha" labelWidth="35">
          <input ref="captchaInput" @confirm="submitForm" class="uni-input" type="text" placeholder="验证码"
            v-model="formData.captcha" />
          <view v-if="needCaptcha" class="admin-captcha-img pointer" @click="createCaptcha">
            <img :src="captchaBase64" style="width:120px; height:32px" />
          </view>
        </uni-forms-item>
        <view class="uni-button-group">
          <button class="uni-button uni-button-full" type="primary" :loading="loading" :disabled="loading"
            @click="submitForm">登录</button>
        </view>
      </uni-forms>
    </view>

    <view class="foot"> 
      <text style="cursor: pointer;" @click="openTargetUrl('https://beian.miit.gov.cn/')">备案：{{siteIcp||" "}}</text>
    </view>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapActions,
    mapState,
    mapGetters
  } from 'vuex'

  import md5 from 'js-md5'
  import config from '@/admin.config.js'

  export default {
    data() {
      return {
        indexPage: config.index.url,
        showPassword: true,
        loading: false,
        formData: {
          username: '',
          password: '',
          captcha: '',
        },
        needCaptcha: false,
        captchaBase64: '',
        rules: {
          // 对name字段进行必填验证
          username: {
            rules: [{
                required: true,
                errorMessage: '请输入账户',
              },
              {
                minLength: 1,
                maxLength: 30,
                errorMessage: '账户长度在{minLength}到{maxLength}个字符',
              }
            ]
          },
          // 对email字段进行必填验证
          password: {
            rules: [{
                required: true,
                errorMessage: '请输入正确的密码',
              },
              {
                minLength: 6,
                errorMessage: '密码长度大于{minLength}个字符',
              }
            ]
          },
          // 对captcha字段进行必填验证
          captcha: {
            rules: [{
              required: true,
              errorMessage: '请输入验证码',
            }]
          }
        }
      }
    },
    computed: {
      ...mapState('app', ['appName', 'theme']),
      ...mapState('config', ['siteIcp', 'siteLogo', 'siteName'])
    },
    mounted() {
      // #ifdef H5
      // #ifndef VUE3
      this.$refs.usernameInput.$refs.input.focus()
      // #endif
      // #endif
      const self = this;
      this.getLastUsername().then(username => {
        self.formData.username = username || ""
      })
    },
    methods: {
      ...mapActions({
        userLogin: "user/login",
        getLastUsername: 'user/getLastUsername',
        getCaptcha: 'unify/getCaptcha',
      }),
      changePassword(status) {
        this.showPassword = status
      },
      submitForm() {
        uni.showLoading({
          mask: true,
          title: "登录中...",
        });

        setTimeout(() => {

          this.$refs.form.validate().then(data => {
            data.password = md5(data.password)
            this.userLogin(data).then(res => {


              uni.showToast({
                title: '登录成功',
                icon: 'none'
              })

              setTimeout(() => {
                uni.redirectTo({
                  url: this.indexPage,
                })
              }, 1000)

            })


          }).catch(err => {
            if (err.needCaptcha) {
              this.createCaptcha()
            }
          }).finally(err => {
            uni.hideLoading()
          })
        }, 500)


      },
      createCaptcha() {
        this.formData.captcha = ''
        this.needCaptcha = true
        this.captchaBase64 = this.getCaptcha('login');
      },
      openTargetUrl(url){
        window.open(url)
      }
    }
  }
</script>
<style scoped lang="scss">
  
  page{
    margin-top: 0!important;
  }
  
  .uni-container {
    padding: 0 50px !important;
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0 !important;
    background-color: $top-window-bg-color !important;
  }

  .uni-input {
    width: 300px;
    max-width: 60vw;
    height: 30px;
    padding: 10px;
    background-color: rgba(0, 0, 0, .1);
    border: 1px solid hsla(0, 0%, 100%, .1);
    border-radius: 15rpx;
    color: white;
  }

  .uni-button {
    width: 350px;
    max-width: 60vw;
  }

  .head {
    display: flex;
    flex-direction: row;
    align-items: center;

    color: white;

    z-index: 999;

    .logo {
      display: flex;
      align-items: center;
      flex: 1;

      .title {
        padding-left: 10px;
        align-self: center;
        font-size: 16px;
      }
    }

    .home {

      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;


      .img {
        width: 16px;
        height: 16px;
      }

      .text {
        margin-left: 8px;
        font-size: 16px;
      }
    }
  }

  .body {
    margin-top: -120px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .title {
      font-size: 28px;
      margin-bottom: 50px;
      text-align: center;
      color: #eee;
      font-weight: bold;

    }
  }

  .foot {
    border-top: #23344b solid 1px;
    text-align: center;
    color: #ecf0f1;
    font-size: 14px;
    padding: 10px 0;

    a {
      color: #ecf0f1;
    }
  }

  .logo-left {
    position: absolute;

    left: 0;
    margin-left: 50rpx;
  }
</style>